<template>
  <div>
    <div :class="['mask', show ? 'open' : 'close']" @click="close"></div>
    <div :class="['drawer', 'left', show ? 'open' : 'close']">
      <div ref="drawer" class="content beauty-scroll">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default{
  name:'Drawer',
  props:{
    show:{
      type: Boolean,
      default: false,
    },
  },
  setup(props,context) {

    const close = ():void=>{
      context.emit('update:show', false)
    }

    return{
      close,
    }
  }
}
</script>

<style lang="less" scoped>
  @shadow-color: rgba(0, 0, 0, 0.15);
  .mask{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: @shadow-color;
    transition: all 0.5s;
    z-index: 100;
    &.open{
      display: inline-block;
    }
    &.close{
      display: none;
    }
  }
  .drawer{
    position: fixed;
    transition: all 0.5s;
    height: 100vh;
    z-index: 100;
    &.left{
      left: 0px;
      &.open{
        .content{
          box-shadow: 2px 0 8px @shadow-color;
        }
      }
      &.close{
        transform: translateX(-100%);
      }
    }
    &.right{
      right: 0px;
      .content{
        float: right;
      }
      &.open{
        .content{
          box-shadow: -2px 0 8px @shadow-color;
        }
      }
      &.close{
        transform: translateX(100%);
      }
    }
  }
  .content{
    display: inline-block;
    height: 100vh;
    overflow-y: auto;
  }
</style>